<template>
  <el-card class="vulnerability-details-card">
    <template #header>
      <div class="card-header">
        <span class="vulnerability-title">
          <el-icon :size="20"><Warning /></el-icon>
          {{ vulnerability?.vuln_id || '漏洞详情' }}
        </span>
        <div class="header-actions">
          <!-- 严重程度标签 -->
          <el-tag :type="getSeverityType(vulnerability?.severity)" class="severity-tag">
            {{ getSeverityLabel(vulnerability?.severity) }}
          </el-tag>
          
          <!-- 刷新按钮 -->
          <el-button 
            v-if="vulnerability" 
            type="text" 
            size="small" 
            @click="refreshVulnerability"
            :loading="loading"
            title="刷新漏洞信息"
          >
            <el-icon><Refresh /></el-icon>
          </el-button>
          
          <!-- 操作按钮组 -->
          <el-dropdown trigger="click" @command="handleHeaderAction">
            <el-button type="primary" size="small" plain>
              <el-icon><More /></el-icon>
              操作
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="copy">
                  <el-icon><CopyDocument /></el-icon>
                  复制漏洞详情
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-icon><Download /></el-icon>
                  导出报告
                  <template #title>
                    <el-dropdown trigger="hover" @command="handleHeaderAction">
                      <el-button type="text" size="small">
                        导出报告 <i class="el-icon-arrow-right el-icon--right"></i>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item command="export-pdf">
                            <el-icon><CopyDocument /></el-icon>
                            PDF报告
                          </el-dropdown-item>
                          <el-dropdown-item command="export-excel">
                            <el-icon><FileExcel /></el-icon>
                            Excel表格
                          </el-dropdown-item>
                          <el-dropdown-item command="export-json">
                            <el-icon><FileJson /></el-icon>
                            JSON数据
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </template>
                </el-dropdown-item>
                <el-dropdown-item command="share" divided>
                  <el-icon><Share /></el-icon>
                  生成分享链接
                </el-dropdown-item>
                <el-dropdown-item command="mark-fixed" v-if="showActions" divided>
                  <el-icon><Check /></el-icon>
                  标记为已修复
                </el-dropdown-item>
                <el-dropdown-item command="false-positive" v-if="showActions">
                  <el-icon><Close /></el-icon>
                  误报反馈
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </template>
    
    <div v-if="vulnerability" class="vulnerability-content">
      <!-- 严重程度可视化 -->
      <div class="severity-visualization">
        <div class="severity-score">
          <div class="score-circle" :class="getSeverityClass(vulnerability.severity)">
            <span class="score-value">{{ (vulnerability.risk_score * 10).toFixed(1) }}</span>
            <span class="score-label">CVSS评分</span>
          </div>
        </div>
        <div class="severity-metrics">
          <div class="metric-item">
            <span class="metric-label">攻击复杂度</span>
            <div class="metric-bar">
              <div class="metric-fill" :style="{width: `${getAttackComplexityScore(vulnerability)}%`}"></div>
            </div>
          </div>
          <div class="metric-item">
            <span class="metric-label">影响范围</span>
            <div class="metric-bar">
              <div class="metric-fill" :style="{width: `${getImpactScore(vulnerability)}%`}"></div>
            </div>
          </div>
          <div class="metric-item">
            <span class="metric-label">可利用性</span>
            <div class="metric-bar">
              <div class="metric-fill" :style="{width: `${getExploitabilityScore(vulnerability)}%`}"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 基本信息 -->
      <div class="basic-info">
        <h3>基本信息</h3>
        <el-descriptions :column="2" border class="info-descriptions">
          <el-descriptions-item label="漏洞ID">{{ vulnerability.vuln_id }}</el-descriptions-item>
          <el-descriptions-item label="漏洞类型">{{ getVulnTypeLabel(vulnerability.vuln_type) }}</el-descriptions-item>
          <el-descriptions-item label="路径">{{ vulnerability.path }}</el-descriptions-item>
          <el-descriptions-item label="参数" v-if="vulnerability.params">{{ vulnerability.params.join(', ') }}</el-descriptions-item>
          <el-descriptions-item label="风险评分">{{ (vulnerability.risk_score * 10).toFixed(1) }}</el-descriptions-item>
          <el-descriptions-item label="发现时间">
            <div class="date-info">
              <div>{{ formatDate(vulnerability.created_at) }}</div>
              <div class="relative-time">{{ formatRelativeTime(vulnerability.created_at) }}</div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="漏洞状态">
            <el-tag :type="getStatusType(vulnerability.status || 'unhandled')" effect="dark">
              {{ getStatusLabel(vulnerability.status || 'unhandled') }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item v-if="vulnerability.updated_at" label="更新时间">
            <div class="date-info">
              <div>{{ formatDate(vulnerability.updated_at) }}</div>
              <div class="relative-time">{{ formatRelativeTime(vulnerability.updated_at) }}</div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="影响资产" :span="2">{{ vulnerability.asset || '-' }}</el-descriptions-item>
          <el-descriptions-item label="置信度" v-if="vulnerability.confidence">{{ vulnerability.confidence }}%</el-descriptions-item>
          <el-descriptions-item label="扫描工具" v-if="vulnerability.scanner">{{ vulnerability.scanner }}</el-descriptions-item>
        </el-descriptions>
      </div>
      
      <!-- 漏洞描述 -->
      <div class="vulnerability-section">
        <h3>漏洞描述</h3>
        <div class="description-content">
          <p>{{ getVulnDescription(vulnerability.vuln_type) }}</p>
          <!-- 漏洞影响和潜在危害 -->
          <div class="vulnerability-impact" v-if="getVulnImpact(vulnerability.vuln_type)">
            <h4>潜在危害</h4>
            <ul>
              <li v-for="(impact, index) in getVulnImpact(vulnerability.vuln_type)" :key="index">
                {{ impact }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- 漏洞证据 -->
      <div class="vulnerability-section" v-if="vulnerability.evidence">
        <h3>漏洞证据</h3>
        <div class="evidence-content">
          <el-tabs v-model="activeEvidenceTab">
            <el-tab-pane label="原始数据">
              <el-input 
                v-model="vulnerability.evidence" 
                type="textarea" 
                rows="4" 
                readonly
                class="evidence-textarea"
              />
            </el-tab-pane>
            <el-tab-pane label="格式化视图" v-if="canFormatEvidence(vulnerability.vuln_type)">
              <div class="formatted-evidence" v-html="formatEvidence(vulnerability)"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      
      <!-- 影响范围 -->
      <div class="vulnerability-section" v-if="vulnerability.impacted_versions">
        <h3>影响范围</h3>
        <div class="impacted-versions">
          <el-tag 
            v-for="version in vulnerability.impacted_versions.split(',')" 
            :key="version.trim()"
            size="small"
          >
            {{ version.trim() }}
          </el-tag>
        </div>
        <!-- 受影响组件和功能 -->
        <div class="affected-components" v-if="vulnerability.affected_components">
          <h4>受影响组件</h4>
          <div class="components-list">
            <el-tag 
              v-for="component in vulnerability.affected_components" 
              :key="component"
              size="small"
              type="info"
              class="component-tag"
            >
              {{ component }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <!-- 修复建议 -->
      <div class="vulnerability-section" v-if="vulnerability.suggestion || getDefaultSuggestion(vulnerability.vuln_type)">
        <h3>修复建议</h3>
        <div class="suggestion-content">
          <!-- 修复难度评估 -->
          <div class="remediation-difficulty" v-if="getRemediationDifficulty(vulnerability.vuln_type)">
            <div class="difficulty-label">修复难度：</div>
            <div class="difficulty-level">
              <el-rate 
                :model-value="getRemediationDifficulty(vulnerability.vuln_type)" 
                disabled 
                show-score
                max="5"
              ></el-rate>
            </div>
          </div>
          
          <!-- 修复步骤 -->
          <div class="remediation-steps">
            <h4>修复步骤</h4>
            <div class="steps-content">
              <pre>{{ vulnerability.suggestion || getDefaultSuggestion(vulnerability.vuln_type) }}</pre>
            </div>
          </div>
          
          <!-- 代码示例 -->
          <div class="code-example" v-if="getCodeExample(vulnerability.vuln_type)">
            <h4>代码示例</h4>
            <el-tabs v-model="activeCodeTab">
              <el-tab-pane label="漏洞代码">
                <el-input 
                  :value="getCodeExample(vulnerability.vuln_type).vulnerable" 
                  type="textarea" 
                  rows="6" 
                  readonly
                  class="code-textarea"
                />
              </el-tab-pane>
              <el-tab-pane label="安全代码">
                <el-input 
                  :value="getCodeExample(vulnerability.vuln_type).secure" 
                  type="textarea" 
                  rows="6" 
                  readonly
                  class="code-textarea"
                />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      
      <!-- 技术分析 -->
      <div class="vulnerability-section">
        <h3>技术分析</h3>
        <div class="technical-analysis">
          <!-- 攻击向量 -->
          <div class="analysis-item">
            <h4>攻击向量</h4>
            <p>{{ getAttackVector(vulnerability.vuln_type) }}</p>
          </div>
          
          <!-- 防御措施 -->
          <div class="analysis-item">
            <h4>防御措施</h4>
            <ul>
              <li v-for="(measure, index) in getDefenseMeasures(vulnerability.vuln_type)" :key="index">
                {{ measure }}
              </li>
            </ul>
          </div>
          
          <!-- 检测方法 -->
          <div class="analysis-item">
            <h4>检测方法</h4>
            <p>{{ getDetectionMethod(vulnerability.vuln_type) }}</p>
          </div>
        </div>
      </div>
      
      <!-- 参考链接 -->
      <div class="vulnerability-section" v-if="vulnerability.references && vulnerability.references.length > 0">
        <h3>参考链接</h3>
        <div class="references-list">
          <a 
            v-for="(ref, index) in vulnerability.references" 
            :key="index"
            :href="ref.url" 
            target="_blank"
            rel="noopener noreferrer"
            class="reference-link"
          >
            <el-icon><Link /></el-icon>
            <span>{{ ref.name }}</span>
          </a>
        </div>
        <!-- CVE信息 -->
        <div class="cve-info" v-if="vulnerability.cve_id">
          <h4>CVE信息</h4>
          <a 
            :href="`https://nvd.nist.gov/vuln/detail/${vulnerability.cve_id}`"
            target="_blank"
            rel="noopener noreferrer"
            class="cve-link"
          >
            {{ vulnerability.cve_id }}
          </a>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="vulnerability-actions" v-if="showActions">
        <el-button 
          type="primary" 
          @click="handleFix"
          :loading="loading"
          icon="el-icon-check"
        >
          标记为已修复
        </el-button>
        <el-button 
          type="info" 
          @click="handleFalsePositive"
          :loading="loading"
          icon="el-icon-circle-close"
        >
          误报反馈
        </el-button>
        <el-button 
          type="warning" 
          @click="handleRecheck"
          :loading="loading"
          icon="el-icon-refresh"
        >
          重新检查
        </el-button>
        <el-dropdown :disabled="loading">
          <el-button :loading="loading" icon="el-icon-setting">
            更改状态 <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item 
                v-for="option in statusOptions.filter(opt => opt.value !== (vulnerability.status || 'unhandled'))" 
                :key="option.value"
                @click="handleStatusUpdate(option.value)"
              >
                {{ option.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button 
          type="success" 
          plain
          @click="refreshVulnerability"
          :loading="loading"
          icon="el-icon-refresh-right"
        >
          刷新数据
        </el-button>
        <slot name="actions"></slot>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-else class="empty-state">
      <el-empty description="暂无漏洞详情"></el-empty>
    </div>
  </el-card>
  
  <!-- 分享链接对话框 -->
  <el-dialog
    v-model="showShareDialog"
    title="分享漏洞详情"
    width="400px"
    center
  >
    <div class="share-dialog-content">
      <p class="share-description">
        通过以下链接分享此漏洞详情。链接有效期为24小时，请注意信息安全。
      </p>
      <el-input
        v-model="shareLink"
        readonly
        placeholder="分享链接"
        class="share-link-input"
      >
        <template #append>
          <el-button @click="copyShareLink" type="primary" size="small">
            <el-icon><CopyDocument /></el-icon>
            复制
          </el-button>
        </template>
      </el-input>
      <div class="share-tips">
        <el-alert
          title="安全提示"
          type="warning"
          :closable="false"
          show-icon
        >
          请确保只将链接分享给授权人员，避免敏感信息泄露。
        </el-alert>
      </div>
    </div>
  </el-dialog>
  
  <!-- 全局加载遮罩 -->
  <el-loading
    v-if="loading"
    text="处理中..."
    fullscreen
    :background="'rgba(255, 255, 255, 0.8)'" 
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { Warning, Link, More, Share, Refresh, Check, Close, InfoFilled, CopyDocument, FileExcel, FileJson } from '@element-plus/icons-vue'
import { apiService } from '../services/apiService'

// Props
const props = defineProps({
  // 漏洞数据
  vulnerability: {
    type: Object,
    default: null
  },
  
  // 是否显示操作按钮
  showActions: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['fix', 'false-positive', 'recheck', 'status-updated'])

// 漏洞状态选项
const statusOptions = [
  { value: 'unhandled', label: '待处理', type: 'info' },
  { value: 'confirmed', label: '已确认', type: 'warning' },
  { value: 'in_progress', label: '修复中', type: 'primary' },
  { value: 'fixed', label: '已修复', type: 'success' },
  { value: 'verified', label: '已验证', type: 'success' },
  { value: 'false_positive', label: '误报', type: 'info' },
  { value: 'ignored', label: '已忽略', type: 'info' }
]

// 响应式变量
const activeEvidenceTab = ref('0')
const activeCodeTab = ref('0')
const loading = ref(false)
const showShareDialog = ref(false)
const shareLink = ref('')

// 漏洞类型标签映射
const vulnTypeLabels = {
  'sql_injection': 'SQL注入',
  'xss': '跨站脚本',
  'info_leak': '信息泄露',
  'csrf': 'CSRF攻击',
  'cmd_injection': '命令注入',
  'file_upload': '文件上传',
  'auth_bypass': '认证绕过',
  'ssrf': '服务器请求伪造',
  'lfi': '本地文件包含(LFI)',
  'rce': '远程代码执行(RCE)',
  'path_traversal': '路径遍历',
  'information_disclosure': '信息泄露',
  'insecure_config': '不安全配置',
  'other': '其他漏洞'
}

// 漏洞描述映射
const vulnDescriptions = {
  'sql_injection': 'SQL注入是一种常见的Web安全漏洞，攻击者可以通过在用户输入中插入恶意SQL代码，操纵数据库查询，从而访问、修改或删除数据库中的数据。这种漏洞通常发生在应用程序没有正确验证和过滤用户输入的情况下。',
  'xss': '跨站脚本（XSS）攻击允许攻击者在受害者的浏览器中执行恶意脚本。攻击者可以通过注入恶意代码到网页中，当其他用户访问该页面时，恶意代码会在他们的浏览器中执行，可能导致会话劫持、数据盗窃或欺诈行为。',
  'info_leak': '信息泄露漏洞可能导致敏感信息（如源代码、配置文件、用户数据或系统信息）被未授权访问。这类漏洞可能是由于错误配置、不当的错误处理或缺少访问控制引起的。',
  'csrf': '跨站请求伪造（CSRF）攻击强制用户在当前已认证的Web应用程序上执行非预期的操作。攻击者可以欺骗用户的浏览器发送请求到目标站点，利用用户已有的认证状态执行操作，如转账、修改密码等。',
  'cmd_injection': '命令注入漏洞允许攻击者通过操纵应用程序的输入来执行系统命令。这种漏洞通常发生在应用程序使用用户输入来构建系统命令并执行时，没有正确验证和过滤输入内容。',
  'file_upload': '不安全的文件上传功能可能允许攻击者上传恶意文件到服务器，如Web shell、病毒或其他恶意软件。这些文件可能被执行，导致服务器被完全控制。',
  'auth_bypass': '认证绕过漏洞允许攻击者绕过应用程序的认证机制，未经授权访问受保护的资源或功能。这种漏洞可能是由于逻辑缺陷、配置错误或实现不当引起的。',
  'ssrf': '服务器请求伪造（SSRF）漏洞允许攻击者诱导服务器发起请求到攻击者指定的目标。这可能导致内部系统暴露、数据泄露或其他安全问题。',
  'lfi': '本地文件包含(LFI)漏洞允许攻击者通过操纵文件路径引用，使应用程序包含并执行服务器上的本地文件。这可能导致信息泄露、源代码暴露或远程代码执行。',
  'rce': '远程代码执行(RCE)漏洞允许攻击者在目标系统上执行任意代码。这是一种严重的漏洞类型，可能导致完全的系统入侵、数据泄露或成为横向移动的跳板。',
  'path_traversal': '路径遍历漏洞允许攻击者访问应用程序预期目录之外的文件和目录。通过使用特殊字符序列(如../../)，攻击者可以导航到系统文件，导致信息泄露或系统入侵。',
  'information_disclosure': '信息泄露漏洞导致敏感信息(如源代码、配置文件、内部路径或用户数据)被意外暴露给未授权用户。这些信息可能被用于计划更复杂的攻击。',
  'insecure_config': '不安全配置是指由于配置错误或默认设置不当而导致的安全弱点。常见的例子包括默认密码、不必要的服务、错误的文件权限或过度宽松的安全策略。',
  'other': '其他类型的安全漏洞，可能需要根据具体情况进行分析和处理。'
}

// 获取漏洞类型标签
const getVulnTypeLabel = (type) => {
  return vulnTypeLabels[type] || type
}

// 获取漏洞描述
const getVulnDescription = (type) => {
  return vulnDescriptions[type] || '该漏洞暂无详细描述。'
}

// 获取严重程度标签
const getSeverityLabel = (severity) => {
  const labels = {
    'critical': '严重',
    'high': '高',
    'medium': '中',
    'low': '低',
    'info': '信息'
  }
  return labels[severity] || severity
}

// 获取严重程度对应的标签类型
const getSeverityType = (severity) => {
  const types = {
    'critical': 'danger',
    'high': 'danger',
    'medium': 'warning',
    'low': 'success',
    'info': 'info'
  }
  return types[severity] || 'info'
}

// 获取漏洞状态标签
const getStatusLabel = (status) => {
  const option = statusOptions.find(opt => opt.value === status)
  return option ? option.label : status || '未知'
}

// 获取漏洞状态类型
const getStatusType = (status) => {
  const option = statusOptions.find(opt => opt.value === status)
  return option ? option.type : 'info'
}

// 获取严重程度CSS类
const getSeverityClass = (severity) => {
  const classes = {
    'critical': 'severity-critical',
    'high': 'severity-high',
    'medium': 'severity-medium',
    'low': 'severity-low',
    'info': 'severity-info'
  }
  return classes[severity] || 'severity-unknown'
}

// 获取攻击复杂度评分
const getAttackComplexityScore = (vulnerability) => {
  if (!vulnerability || typeof vulnerability !== 'object') return 50
  
  try {
    // 根据漏洞类型估算攻击复杂度
    const complexityScores = {
      'xss': 30,
      'sql_injection': 40,
      'csrf': 20,
      'lfi': 60,
      'cmd_injection': 50,
      'rce': 50,
      'path_traversal': 45,
      'auth_bypass': 70,
      'info_leak': 35,
      'information_disclosure': 35,
      'insecure_config': 65,
      'file_upload': 40,
      'ssrf': 55,
      'other': 50
    }
    return complexityScores[vulnerability.vuln_type] || 50
  } catch (error) {
    console.error('获取攻击复杂度评分失败:', error)
    return 50
  }
}

// 获取影响范围评分
const getImpactScore = (vulnerability) => {
  if (!vulnerability || typeof vulnerability !== 'object') return 50
  
  try {
    // 根据严重程度估算影响范围
    const impactScores = {
      'critical': 90,
      'high': 75,
      'medium': 50,
      'low': 30,
      'info': 15
    }
    return impactScores[vulnerability.severity] || 50
  } catch (error) {
    console.error('获取影响范围评分失败:', error)
    return 50
  }
}

// 获取可利用性评分
const getExploitabilityScore = (vulnerability) => {
  if (!vulnerability || typeof vulnerability !== 'object') return 50
  
  try {
    // 根据漏洞类型和严重程度综合估算
    const baseScores = {
      'critical': 80,
      'high': 65,
      'medium': 40,
      'low': 20,
      'info': 10
    }
    
    // 某些漏洞类型更容易被利用
    const exploitabilityFactors = {
      'xss': 1.2,
      'sql_injection': 1.1,
      'csrf': 0.9,
      'lfi': 1.3,
      'cmd_injection': 1.4,
      'rce': 1.5,
      'path_traversal': 1.2,
      'auth_bypass': 1.4,
      'info_leak': 0.8,
      'information_disclosure': 0.8,
      'insecure_config': 1.3,
      'file_upload': 1.4,
      'ssrf': 1.2,
      'other': 1.0
    }
    
    const baseScore = baseScores[vulnerability.severity] || 50
    const factor = exploitabilityFactors[vulnerability.vuln_type] || 1.0
    return Math.min(Math.round(baseScore * factor), 100)
  } catch (error) {
    console.error('获取可利用性评分失败:', error)
    return 50
  }
}

// 获取漏洞潜在危害
const getVulnImpact = (vulnType) => {
  const impacts = {
    'xss': [
      '会话劫持和身份盗用',
      '敏感数据窃取',
      '网站篡改和钓鱼攻击',
      '权限提升',
      '传播恶意软件'
    ],
    'sql_injection': [
      '未授权访问数据库内容',
      '敏感数据泄露',
      '数据库结构损坏',
      '绕过认证机制',
      '操作系统级别的命令执行'
    ],
    'csrf': [
      '未授权的数据修改',
      '账户接管',
      '资金转账或支付欺诈',
      '更改用户权限',
      '恶意内容发布'
    ],
    'cmd_injection': [
      '完全控制服务器',
      '数据窃取和加密货币挖矿',
      '建立持久化后门',
      '横向移动到内部网络',
      '拒绝服务攻击'
    ],
    'file_upload': [
      'Web Shell上传导致服务器被控',
      '恶意文件分发',
      '绕过安全控制',
      '持久化攻击',
      '内网横向移动'
    ],
    'ssrf': [
      '访问内部网络资源',
      '云服务元数据泄露',
      '绕过防火墙限制',
      '数据库查询伪造',
      '文件读取'
    ]
  }
  return impacts[vulnType] || null
}

// 是否可以格式化证据
const canFormatEvidence = (vulnType) => {
  if (!vulnType || typeof vulnType !== 'string') return false
  
  try {
    // 某些类型的漏洞证据可以被格式化展示
    const formatableTypes = ['xss', 'sql_injection', 'lfi', 'path_traversal', 'cmd_injection']
    return formatableTypes.includes(vulnType)
  } catch (error) {
    console.error('检查证据格式失败:', error)
    return false
  }
}

// 格式化漏洞证据
const formatEvidence = (vulnerability) => {
  if (!vulnerability || typeof vulnerability !== 'object' || !vulnerability.evidence) return ''
  
  try {
    // 简单的格式化示例，根据漏洞类型进行不同的格式化
    switch (vulnerability.vuln_type) {
      case 'xss':
        // 高亮XSS payload
        return vulnerability.evidence
          .replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, '<span class="highlight-xss">$&</span>')
          .replace(/javascript:[^\s\"]+/gi, '<span class="highlight-xss">$&</span>')
      case 'sql_injection':
        // 高亮SQL注入模式
        return vulnerability.evidence
          .replace(/(['\"])\s*;[\s\S]*?(\1)/gi, '<span class="highlight-sql">$&</span>')
          .replace(/(or|and|union|select|from|where)\s+/gi, '<span class="highlight-sql">$1 </span>')
      default:
        return vulnerability.evidence
    }
  } catch (error) {
    console.error('格式化证据失败:', error)
    return String(vulnerability.evidence || '')
  }
}

// 获取默认修复建议
const getDefaultSuggestion = (vulnType) => {
  const suggestions = {
    'xss': '1. 对所有用户输入进行严格的验证和过滤\n2. 实施内容安全策略(CSP)\n3. 对输出进行HTML编码\n4. 使用现代框架的内置XSS防护机制\n5. 定期进行安全审计和渗透测试',
    'sql_injection': '1. 使用参数化查询或预处理语句\n2. 实施最小权限原则\n3. 对输入进行严格的类型检查和验证\n4. 使用ORM框架时注意防范SQL注入\n5. 定期更新数据库和相关组件',
    'csrf': '1. 实施CSRF令牌验证\n2. 使用SameSite Cookie属性\n3. 验证请求来源(Origin和Referer头)\n4. 对敏感操作要求二次验证\n5. 实施正确的CORS策略',
    'cmd_injection': '1. 避免使用危险的命令执行函数\n2. 对所有输入进行严格的验证和过滤\n3. 使用白名单机制限制可执行的命令\n4. 使用escapeshellarg()等函数处理参数\n5. 实施最小权限原则',
    'file_upload': '1. 实施严格的文件类型验证(不仅检查扩展名)\n2. 使用文件内容验证(如MIME类型检查)\n3. 存储文件时使用随机文件名\n4. 将上传目录置于Web根目录之外\n5. 对上传文件应用内容安全策略\n6. 考虑使用专业的文件存储服务',
    'ssrf': '1. 实施URL白名单机制\n2. 禁用不必要的URL方案\n3. 不允许访问内部网络地址\n4. 实施超时机制\n5. 记录和监控所有外部请求',
    'lfi': '1. 对文件路径进行严格的白名单验证\n2. 避免直接使用用户输入构建文件路径\n3. 限制文件包含的目录范围\n4. 使用绝对路径而不是相对路径\n5. 实施文件访问控制机制',
    'rce': '1. 避免使用危险的函数执行用户输入\n2. 对所有输入进行严格的验证和过滤\n3. 使用沙箱环境执行不受信任的代码\n4. 实施输入白名单策略\n5. 定期更新依赖库和系统组件',
    'path_traversal': '1. 对文件路径进行规范化处理\n2. 实施文件路径白名单机制\n3. 避免使用用户输入直接构建文件路径\n4. 使用chroot或容器隔离文件系统访问\n5. 限制文件系统访问权限',
    'auth_bypass': '1. 实施多层身份验证机制\n2. 使用标准的身份验证库和框架\n3. 对所有API端点实施权限检查\n4. 实施会话管理最佳实践\n5. 定期进行安全代码审查',
    'info_leak': '1. 移除调试信息和注释\n2. 实施适当的错误处理，避免暴露详细错误信息\n3. 限制敏感文件和目录的访问权限\n4. 实施数据泄露防护(DLP)措施\n5. 定期进行信息泄露扫描',
    'information_disclosure': '1. 移除调试信息和注释\n2. 实施适当的错误处理，避免暴露详细错误信息\n3. 限制敏感文件和目录的访问权限\n4. 实施数据泄露防护(DLP)措施\n5. 定期进行信息泄露扫描',
    'insecure_config': '1. 移除默认凭证和示例账户\n2. 禁用不必要的服务和功能\n3. 实施最小权限原则\n4. 配置强密码策略和定期轮换\n5. 启用全面的日志记录和监控',
    'other': '1. 详细分析漏洞性质和根本原因\n2. 参考相关安全最佳实践\n3. 咨询安全专家获取具体修复建议\n4. 测试修复措施的有效性\n5. 实施长期的安全监控机制'
  }
  return suggestions[vulnType] || '请根据漏洞的具体情况制定修复方案。'
}

// 获取修复难度
const getRemediationDifficulty = (vulnType) => {
  const difficulties = {
    'xss': 3,
    'sql_injection': 4,
    'csrf': 2,
    'cmd_injection': 5,
    'file_upload': 4,
    'ssrf': 3,
    'lfi': 4,
    'rce': 5,
    'path_traversal': 3,
    'auth_bypass': 4,
    'info_leak': 2,
    'information_disclosure': 2,
    'insecure_config': 3,
    'other': 3
  }
  return difficulties[vulnType] || 3
}

// 获取代码示例
const getCodeExample = (vulnType) => {
  const examples = {
    'xss': {
      vulnerable: '<div class="comment">' + 'userInput' + '</div>',
      secure: '<div class="comment">' + 'escapeHtml(userInput)' + '</div>'
    },
    'sql_injection': {
      vulnerable: "SELECT * FROM users WHERE username = '" + 'username' + "' AND password = '" + 'password' + "'",
      secure: 'SELECT * FROM users WHERE username = ? AND password = ?'
    },
    'cmd_injection': {
      vulnerable: 'system("ping " . $_GET["ip"]);',
      secure: '$ip = $_GET["ip"];\nif (filter_var($ip, FILTER_VALIDATE_IP)) {\n  system("ping -c 4 " . escapeshellarg($ip));\n}'
    },
    'file_upload': {
      vulnerable: 'move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $_FILES["file"]["name"]);',
      secure: '$allowed_extensions = array("jpg", "jpeg", "png");\n$ext = strtolower(pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION));\nif (in_array($ext, $allowed_extensions) && getimagesize($_FILES["file"]["tmp_name"])) {\n  $filename = uniqid() . "." . $ext;\n  move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $filename);\n}'
    }
  }
  return examples[vulnType] || null
}

// 获取攻击向量
const getAttackVector = (vulnType) => {
  const vectors = {
    'xss': '攻击者通常通过在用户可控输入字段中注入恶意JavaScript代码来利用XSS漏洞。这些输入可能包括表单字段、URL参数、评论区或任何其他用户可以提供内容的位置。当其他用户查看包含恶意代码的页面时，脚本会在他们的浏览器中执行，允许攻击者窃取cookie、劫持会话或执行未授权操作。',
    'sql_injection': '攻击者通过在用户输入中插入恶意SQL语句来利用SQL注入漏洞。常见的攻击向量包括登录表单、搜索框、URL参数或任何接受用户输入并直接将其拼接到SQL查询中的位置。成功的攻击可以允许攻击者绕过认证、提取敏感数据、修改数据库内容或在某些情况下执行系统命令。',
    'csrf': 'CSRF攻击通过欺骗用户在已认证的Web应用程序中执行非预期的操作来工作。攻击者通常通过电子邮件、社交媒体或恶意网站向目标用户发送精心设计的链接或表单。当用户点击链接或提交表单时，请求会发送到目标网站，网站会误以为这是用户的有意操作，因为用户的浏览器会自动包含相关的认证cookie。',
    'cmd_injection': '命令注入攻击通过在应用程序的输入字段中插入操作系统命令来工作。攻击者通常针对接受用户输入并将其传递给系统命令执行函数(如system()、exec()、shell_exec()等)的应用程序。成功的攻击可以允许攻击者在服务器上执行任意命令，获取系统控制权。',
    'file_upload': '文件上传漏洞的攻击向量是应用程序的文件上传功能。攻击者会尝试上传包含恶意代码的文件(如Web Shell)，这些文件如果被成功上传并执行，可能会导致服务器被完全控制。攻击可能通过绕过文件类型验证、利用解析漏洞或上传到可执行目录来实现。',
    'ssrf': '服务器请求伪造攻击通过诱导应用程序发起请求到攻击者指定的目标来工作。攻击者通常通过操纵URL参数、文件路径或其他可以控制出站请求的输入点。攻击可能针对内部网络资源、云服务元数据端点或其他无法从外部直接访问的服务。',
    'other': '攻击向量取决于具体的漏洞类型和实现细节。通常，攻击者会寻找用户输入未被正确验证或过滤的点，或者寻找逻辑缺陷和实现错误，然后利用这些弱点执行未授权操作或访问敏感信息。'
  }
  return vectors[vulnType] || '攻击向量取决于具体的漏洞类型和实现细节。'
}

// 获取防御措施
const getDefenseMeasures = (vulnType) => {
  const measures = {
    'xss': [
      '对所有用户输入进行严格的验证和过滤',
      '实施内容安全策略(CSP)以限制脚本执行',
      '对输出进行适当的编码(HTML、JavaScript、CSS等)',
      '使用现代框架的内置XSS防护机制',
      '定期进行安全审计和渗透测试'
    ],
    'sql_injection': [
      '始终使用参数化查询或预处理语句',
      '实施最小权限原则，限制数据库用户权限',
      '对输入进行严格的类型检查和验证',
      '使用ORM框架时遵循安全最佳实践',
      '定期更新数据库和相关组件',
      '实施数据库活动监控'
    ],
    'csrf': [
      '为所有状态改变操作实施CSRF令牌验证',
      '使用SameSite Cookie属性限制跨站cookie发送',
      '验证请求来源(Origin和Referer头)',
      '对敏感操作要求二次验证',
      '实施正确的CORS策略'
    ],
    'cmd_injection': [
      '避免使用系统命令执行函数',
      '对所有输入进行严格的白名单验证',
      '使用escapeshellarg()和escapeshellcmd()函数处理命令参数',
      '实施最小权限原则，限制应用程序执行权限',
      '使用应用程序防火墙监控异常命令执行',
      '考虑使用API替代直接的系统命令执行'
    ],
    'file_upload': [
      '实施严格的文件类型验证(检查内容而非仅检查扩展名)',
      '使用随机文件名存储上传文件',
      '将上传文件存储在Web根目录之外',
      '实施文件内容验证(如使用文件签名检测)',
      '配置适当的文件权限',
      '使用专业的文件存储服务或CDN',
      '对上传文件应用病毒扫描',
      '实施上传速率限制和文件大小限制'
    ],
    'ssrf': [
      '实施URL白名单机制，限制可访问的目标',
      '禁用不必要的URL方案(如file://、gopher://等)',
      '禁止访问内部网络地址(127.0.0.1、内网IP等)',
      '实施请求超时和资源限制',
      '记录和监控所有外部请求',
      '使用代理服务处理外部请求',
      '验证响应内容类型'
    ],
    'other': [
      '实施深度防御策略',
      '遵循安全编码最佳实践',
      '定期进行安全培训和意识提升',
      '建立漏洞管理流程',
      '实施安全监控和事件响应',
      '定期进行第三方安全评估',
      '保持软件和依赖的更新'
    ]
  }
  return measures[vulnType] || ['请根据漏洞的具体情况实施适当的防御措施。']
}

// 获取检测方法
const getDetectionMethod = (vulnType) => {
  const methods = {
    'xss': 'XSS漏洞可以通过以下方法检测：1) 静态代码分析，寻找未正确转义的用户输入；2) 动态应用安全测试(DAST)，使用自动化工具尝试注入JavaScript代码；3) 渗透测试，手动尝试各种XSS有效载荷；4) 内容安全策略(CSP)违规报告；5) 监控异常的客户端脚本行为。',
    'sql_injection': 'SQL注入漏洞可以通过以下方法检测：1) 静态代码分析，查找直接拼接SQL查询的代码；2) 动态扫描，使用自动化工具发送特制的SQL注入测试字符串；3) 渗透测试，手动测试输入字段对SQL语法的反应；4) 数据库监控，检测异常查询模式；5) 使用SQL注入专用工具(如SQLmap)进行测试。',
    'cmd_injection': '命令注入漏洞可以通过以下方法检测：1) 静态代码分析，寻找危险的系统命令执行函数；2) 动态扫描，尝试使用命令分隔符(如;、&&、|等)和特殊字符；3) 渗透测试，手动测试各种命令注入有效载荷；4) 监控服务器上的异常进程和网络连接；5) 使用自动化安全测试工具。',
    'file_upload': '文件上传漏洞可以通过以下方法检测：1) 测试文件类型验证机制，尝试绕过扩展名和MIME类型检查；2) 上传包含恶意代码的文件，检查是否被执行；3) 测试文件存储位置和访问控制；4) 检查文件处理逻辑中的路径遍历漏洞；5) 使用自动化安全扫描工具。',
    'ssrf': 'SSRF漏洞可以通过以下方法检测：1) 测试URL参数是否可以访问内部资源；2) 尝试访问云服务元数据端点(如AWS的169.254.169.254)；3) 检查是否可以使用不同的URL方案(如file://、dict://等)；4) 监控应用程序的出站连接；5) 使用自动化安全测试工具。',
    'other': '漏洞检测方法取决于具体的漏洞类型，通常包括：1) 静态和动态代码分析；2) 自动化漏洞扫描；3) 手动渗透测试；4) 代码审查；5) 安全监控和异常检测；6) 第三方安全评估；7) 漏洞赏金计划。综合使用这些方法可以提高漏洞检测的全面性和准确性。'
  }
  return methods[vulnType] || '漏洞检测方法取决于具体的漏洞类型，通常包括静态分析、动态测试、渗透测试和代码审查等方法。'
}

// 格式化日期时间
const formatDate = (dateString) => {
  if (!dateString) return '-'
  
  try {
    return new Date(dateString).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch (error) {
    console.error('格式化日期失败:', error)
    return dateString
  }
}

// 格式化相对时间
const formatRelativeTime = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  const now = new Date()
  const diffInMs = now - date
  const diffInMinutes = Math.floor(diffInMs / (1000 * 60))
  const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60))
  const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24))
  
  if (diffInMinutes < 1) return '刚刚'
  if (diffInMinutes < 60) return `${diffInMinutes}分钟前`
  if (diffInHours < 24) return `${diffInHours}小时前`
  if (diffInDays < 30) return `${diffInDays}天前`
  return formatDate(dateString)
}

// 处理头部操作
const handleHeaderAction = (command) => {
  switch (command) {
    case 'copy':
      copyDetails()
      break
    case 'export-pdf':
      exportToPDF()
      break
    case 'export-excel':
      exportExcel()
      break
    case 'export-json':
      exportJSON()
      break
    case 'share':
      generateShareLink()
      break
    case 'mark-fixed':
      handleFix()
      break
    case 'false-positive':
      handleFalsePositive()
      break
    default:
      break
  }
}

// 复制漏洞详情
const copyDetails = async () => {
  if (!props.vulnerability) {
    ElMessage.warning('暂无漏洞详情可复制')
    return
  }
  
  try {
    // 构建要复制的文本内容
    const detailsText = `漏洞ID: ${props.vulnerability.vuln_id}\n漏洞类型: ${getVulnTypeLabel(props.vulnerability.vuln_type)}\n路径: ${props.vulnerability.path}\n严重程度: ${getSeverityLabel(props.vulnerability.severity)}\n风险评分: ${(props.vulnerability.risk_score * 10).toFixed(1)}\n发现时间: ${formatDate(props.vulnerability.created_at)}\n\n${getVulnDescription(props.vulnerability.vuln_type)}\n\n${props.vulnerability.suggestion ? '修复建议:\n' + props.vulnerability.suggestion : ''}`
    
    // 复制到剪贴板
    await navigator.clipboard.writeText(detailsText)
    ElMessage.success('漏洞详情已复制到剪贴板')
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败，请手动复制')
  }
}

// 生成分享链接
const generateShareLink = async () => {
  if (!props.vulnerability) return
  
  try {
    // 在实际应用中，这里应该调用API生成分享链接
    // 这里使用模拟数据
    const timestamp = Date.now()
    const token = Math.random().toString(36).substring(2, 10)
    shareLink.value = `${window.location.origin}/vulnerability/share?token=${token}&id=${props.vulnerability.vuln_id}&t=${timestamp}`
    showShareDialog.value = true
  } catch (error) {
    ElMessage.error('生成分享链接失败')
    console.error('生成分享链接失败:', error)
  }
}

// 复制分享链接
const copyShareLink = async () => {
  try {
    await navigator.clipboard.writeText(shareLink.value)
    ElMessage.success('分享链接已复制到剪贴板')
    showShareDialog.value = false
  } catch (error) {
    ElMessage.error('复制失败，请手动复制')
  }
}

// 导出PDF报告
const exportToPDF = async () => {
  if (!props.vulnerability) return
  
  try {
    loading.value = true
    
    // 准备导出数据
    const exportData = {
      title: `漏洞详情报告 - ${props.vulnerability.vuln_id}`,
      vulnerability: {
        ...props.vulnerability,
        severityLabel: getSeverityLabel(props.vulnerability.severity),
        vulnTypeLabel: getVulnTypeLabel(props.vulnerability.vuln_type),
        description: getVulnDescription(props.vulnerability.vuln_type),
        defaultSuggestion: getDefaultSuggestion(props.vulnerability.vuln_type),
        formattedDate: formatDate(props.vulnerability.created_at)
      },
      generatedAt: new Date().toLocaleString('zh-CN')
    }
    
    // 使用导出服务
    await exportService.exportVulnerability(exportData, 'pdf', `vulnerability_${props.vulnerability.vuln_id}`)
    
    ElMessage.success('PDF报告已成功导出')
    ElNotification({
      title: '导出成功',
      message: `漏洞报告已导出为PDF格式`,
      type: 'success',
      icon: Check
    })
  } catch (error) {
    console.error('导出PDF失败:', error)
    ElMessage.error('PDF导出失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 格式化相对时间
const formatRelativeTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  const now = new Date()
  const diffMs = now - date
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMins / 60)
  const diffDays = Math.floor(diffHours / 24)
  
  if (diffMins < 1) return '刚刚'
  if (diffMins < 60) return `${diffMins}分钟前`
  if (diffHours < 24) return `${diffHours}小时前`
  if (diffDays < 30) return `${diffDays}天前`
  if (diffDays < 365) return `${Math.floor(diffDays / 30)}个月前`
  return `${Math.floor(diffDays / 365)}年前`
}

// 导出Excel
const exportExcel = async () => {
  if (!props.vulnerability) return
  
  try {
    loading.value = true
    
    // 准备导出数据
    const exportData = {
      vulnerability: {
        ...props.vulnerability,
        severityLabel: getSeverityLabel(props.vulnerability.severity),
        vulnTypeLabel: getVulnTypeLabel(props.vulnerability.vuln_type),
        description: getVulnDescription(props.vulnerability.vuln_type),
        suggestion: props.vulnerability.suggestion || getDefaultSuggestion(props.vulnerability.vuln_type)
      }
    }
    
    await exportService.exportVulnerability(exportData, 'excel', `vulnerability_${props.vulnerability.vuln_id}`)
    
    ElMessage.success('Excel文件已成功导出')
    ElNotification({
      title: '导出成功',
      message: `漏洞数据已导出为Excel格式`,
      type: 'success',
      icon: Check
    })
  } catch (error) {
    console.error('导出Excel失败:', error)
    ElMessage.error('Excel导出失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 导出JSON
const exportJSON = async () => {
  if (!props.vulnerability) return
  
  try {
    // 准备完整的漏洞数据
    const fullVulnerabilityData = {
      ...props.vulnerability,
      metadata: {
        exportedAt: new Date().toISOString(),
        exportVersion: '1.0',
        severityLabel: getSeverityLabel(props.vulnerability.severity),
        vulnTypeLabel: getVulnTypeLabel(props.vulnerability.vuln_type)
      },
      analysis: {
        description: getVulnDescription(props.vulnerability.vuln_type),
        impact: getVulnImpact(props.vulnerability.vuln_type),
        remediationDifficulty: getRemediationDifficulty(props.vulnerability.vuln_type),
        defaultSuggestion: getDefaultSuggestion(props.vulnerability.vuln_type),
        codeExample: getCodeExample(props.vulnerability.vuln_type)
      }
    }
    
    exportService.exportJSON(fullVulnerabilityData, `vulnerability_${props.vulnerability.vuln_id}_detailed`)
    
    ElMessage.success('JSON数据已成功导出')
  } catch (error) {
    console.error('导出JSON失败:', error)
    ElMessage.error('JSON导出失败: ' + error.message)
  }
}

// 处理标记为已修复
const handleFix = async () => {
  if (!props.vulnerability) return
  
  try {
    const { value: reason } = await ElMessageBox.prompt(
      `请输入修复说明（可选）：`,
      `确定要将漏洞 ${props.vulnerability.vuln_id} 标记为已修复吗？`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        inputPlaceholder: '输入修复方法、版本等信息',
        inputType: 'textarea',
        inputRows: 3
      }
    )
    
    loading.value = true
    emit('fix', {
      id: props.vulnerability.vuln_id,
      reason: reason || '手动标记为已修复'
    })
    
    ElNotification({
      title: '操作成功',
      message: '漏洞已标记为已修复',
      type: 'success',
      icon: Check
    })
  } catch (error) {
    // 取消操作或出错
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  } finally {
    loading.value = false
  }
}

// 处理漏洞状态更新
const handleStatusUpdate = async (newStatus) => {
  if (!props.vulnerability || typeof props.vulnerability !== 'object' || !newStatus || props.vulnerability.status === newStatus) return
  
  try {
    // 对于误报状态，要求提供原因
    let reason = ''
    if (newStatus === 'false_positive') {
      const { value: inputReason } = await ElMessageBox.prompt(
        `请输入误报原因：`,
        `确定要将漏洞 ${props.vulnerability.vuln_id || '未知ID'} 标记为误报吗？`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info',
          inputPlaceholder: '详细说明为何认为这是误报',
          inputType: 'textarea',
          inputRows: 4,
          validateInput: (value) => {
            if (!value || value.trim().length < 10) {
              return '请提供至少10个字符的误报原因说明'
            }
            return true
          }
        }
      )
      reason = inputReason?.trim() || ''
    } 
    // 对于其他状态转换，可以选择提供原因
    else if (['confirmed', 'in_progress', 'fixed', 'verified'].includes(newStatus)) {
      const { value: inputReason } = await ElMessageBox.prompt(
        `请输入状态更新原因（可选）：`,
        `确定要将漏洞状态更新为「${getStatusLabel(newStatus)}」吗？`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: getStatusType(newStatus),
          inputPlaceholder: '简要说明状态变更的原因（可选）',
          inputType: 'textarea',
          inputRows: 2
        }
      )
      reason = inputReason?.trim() || ''
    }
    
    loading.value = true
    
    // 使用apiService调用后端API
    const vulnerabilityId = props.vulnerability.id || props.vulnerability.vuln_id
    if (!vulnerabilityId) {
      throw new Error('无效的漏洞ID')
    }
    
    const result = await apiService.updateVulnerabilityStatus(vulnerabilityId, newStatus, reason)
    
    // 发出事件通知父组件
    emit('status-updated', {
      id: vulnerabilityId,
      status: newStatus,
      reason: reason
    })
    
    // 更新本地状态显示
    if (props.vulnerability) {
      props.vulnerability.status = newStatus
      props.vulnerability.updated_at = new Date().toISOString()
    }
    
    ElNotification({
      title: '操作成功',
      message: `漏洞状态已更新为「${getStatusLabel(newStatus)}」`,
      type: getStatusType(newStatus),
      icon: Check
    })
  } catch (error) {
    // 取消操作或出错
    if (error !== 'cancel') {
      console.error('更新漏洞状态失败:', error)
      ElMessage.error('更新状态失败，请重试')
    }
  } finally {
    loading.value = false
  }
}

// 处理误报反馈
const handleFalsePositive = async () => {
  await handleStatusUpdate('false_positive')
}

// 处理修复完成
const handleFix = async () => {
  await handleStatusUpdate('fixed')
}

// 处理重新检查
const handleRecheck = async () => {
  if (!props.vulnerability) return
  
  try {
    await ElMessageBox.confirm(
      `确定要重新检查漏洞 ${props.vulnerability.vuln_id} 吗？\n重新检查将使用最新的扫描规则验证此漏洞是否仍然存在。`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'primary'
      }
    )
    
    loading.value = true
    
    // 更新状态为正在重新检查
    try {
      await apiService.updateVulnerabilityStatus(props.vulnerability.id, 'in_recheck', '系统自动触发重新检查')
      emit('status-updated', {
        id: props.vulnerability.id,
        status: 'in_recheck'
      })
      props.vulnerability.status = 'in_recheck'
    } catch (statusError) {
      console.warn('更新状态为重新检查失败，继续进行检查操作:', statusError)
    }
    
    // 发出重新检查事件
    emit('recheck', props.vulnerability.vuln_id)
    
    ElNotification({
      title: '检查开始',
      message: '重新检查已启动，请稍候...',
      type: 'info',
      icon: Refresh
    })
  } catch (error) {
    // 取消操作
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  } finally {
    loading.value = false
  }
}

// 刷新漏洞数据
const refreshVulnerability = () => {
  if (!props.vulnerability) return
  loading.value = true
  emit('refresh', props.vulnerability.vuln_id)
}
</script>

<style scoped>
/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.severity-tag {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

/* 内容区样式 */
.card-content {
  padding: 0;
}

.detail-section {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.detail-section:last-child {
  margin-bottom: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.detail-row {
  display: flex;
  margin-bottom: 12px;
}

.detail-label {
  flex: 0 0 120px;
  font-weight: 500;
  color: #606266;
}

.detail-value {
  flex: 1;
  color: #303133;
  word-break: break-all;
}

.detail-content {
  color: #303133;
  line-height: 1.6;
}

/* 严重程度可视化 */
  .severity-visualization {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  /* 日期信息样式 */
  .date-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .relative-time {
    font-size: 12px;
    color: var(--text-color-secondary, #909399);
    font-style: italic;
  }

.cvss-circle {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cvss-score {
  font-size: 32px;
  font-weight: 700;
}

.severity-critical .cvss-score {
  color: #f56c6c;
}

.severity-high .cvss-score {
  color: #f56c6c;
}

.severity-medium .cvss-score {
  color: #e6a23c;
}

.severity-low .cvss-score {
  color: #67c23a;
}

.severity-info .cvss-score {
  color: #909399;
}

.severity-critical .cvss-circle {
  box-shadow: 0 0 0 4px rgba(245, 108, 108, 0.2);
}

.severity-high .cvss-circle {
  box-shadow: 0 0 0 4px rgba(245, 108, 108, 0.2);
}

.severity-medium .cvss-circle {
  box-shadow: 0 0 0 4px rgba(230, 162, 60, 0.2);
}

.severity-low .cvss-circle {
  box-shadow: 0 0 0 4px rgba(103, 194, 58, 0.2);
}

.severity-info .cvss-circle {
  box-shadow: 0 0 0 4px rgba(144, 147, 153, 0.2);
}

.metrics-container {
  flex: 1;
}

.metric-item {
  margin-bottom: 12px;
}

.metric-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 14px;
  color: #606266;
}

.metric-bar {
  height: 8px;
  background-color: #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.metric-fill {
  height: 100%;
  border-radius: 4px;
}

.metric-fill.severity-high {
  background-color: #f56c6c;
}

.metric-fill.severity-medium {
  background-color: #e6a23c;
}

.metric-fill.severity-low {
  background-color: #67c23a;
}

/* 影响分析 */
.impact-list {
  padding-left: 20px;
  margin-bottom: 16px;
}

.impact-item {
  margin-bottom: 8px;
  color: #606266;
  line-height: 1.5;
  list-style-type: disc;
}

/* 证据格式化 */
.evidence-content {
  padding: 16px;
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  overflow: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
}

.highlight-xss {
  background-color: #ffecd2;
  color: #d68910;
  padding: 2px 4px;
  border-radius: 3px;
}

.highlight-sql {
  background-color: #e1f5fe;
  color: #0288d1;
  padding: 2px 4px;
  border-radius: 3px;
}

.evidence-tabs {
  margin-bottom: 16px;
}

/* 修复难度评估 */
.difficulty-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.difficulty-rating {
  display: flex;
  gap: 4px;
}

.difficulty-star {
  font-size: 20px;
  color: #e4e7ed;
}

.difficulty-star.active {
  color: #fadb14;
}

.difficulty-label {
  font-weight: 500;
  color: #606266;
}

/* 代码示例 */
.code-example {
  margin-bottom: 16px;
  padding: 16px;
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  overflow-x: auto;
}

.code-tabs {
  margin-bottom: 16px;
}

.code-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.code-content {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.code-content.vulnerable {
  color: #f56c6c;
}

.code-content.secure {
  color: #67c23a;
}

/* 修复建议 */
.suggestion-content {
  padding: 16px;
  background-color: #f0f9ff;
  border: 1px solid #d9ecff;
  border-radius: 6px;
  line-height: 1.6;
}

.suggestion-content ol {
  padding-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
}

.suggestion-content li {
  margin-bottom: 8px;
}

.suggestion-content li:last-child {
  margin-bottom: 0;
}

/* 技术分析 */
.analysis-content {
  padding: 16px;
  background-color: #fafafa;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  line-height: 1.6;
}

.defense-list {
  padding-left: 20px;
  margin-bottom: 16px;
}

.defense-item {
  margin-bottom: 8px;
  color: #606266;
  line-height: 1.5;
  list-style-type: disc;
}

/* 参考链接 */
.link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #409eff;
  text-decoration: none;
  transition: all 0.3s;
}

.link-item:hover {
  background-color: #ecf5ff;
  color: #66b1ff;
}

.link-item:last-child {
  margin-bottom: 0;
}

/* 操作区 */
.action-buttons {
  display: flex;
  gap: 10px;
}

.more-actions {
  position: relative;
}

.action-dropdown {
  min-width: 160px;
}

/* 分享对话框样式 */
.share-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.share-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color-secondary, #606266);
}

.share-link-input {
  margin: 10px 0;
}

.share-tips {
  margin-top: 8px;
}

/* 头部操作样式增强 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .action-buttons {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .detail-row {
    flex-direction: column;
  }
  
  .detail-label {
    flex: none;
    margin-bottom: 4px;
  }
  
  .severity-visualization {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cvss-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }
  
  .cvss-score {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .detail-section {
    padding: 12px;
  }
  
  .section-title {
    font-size: 14px;
  }
  
  .evidence-content,
  .code-example {
    padding: 12px;
    font-size: 12px;
  }
}

/* 深色模式样式 */
.dark .card-header {
  border-bottom-color: #303030;
}

.dark .card-title {
  color: #e0e0e0;
}

.dark .detail-section {
  background-color: #1f1f1f;
  border-color: #303030;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .section-title {
  border-bottom-color: #303030;
  color: #e0e0e0;
}

.dark .detail-label {
  color: #909399;
}

.dark .detail-value,
.dark .detail-content {
  color: #e0e0e0;
}

.dark .severity-visualization {
  background-color: #1a1a1a;
}

.dark .cvss-circle {
  background-color: #2d2d2d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.dark .severity-critical .cvss-circle {
  box-shadow: 0 0 0 4px rgba(245, 108, 108, 0.15);
}

.dark .severity-high .cvss-circle {
  box-shadow: 0 0 0 4px rgba(245, 108, 108, 0.15);
}

.dark .severity-medium .cvss-circle {
  box-shadow: 0 0 0 4px rgba(230, 162, 60, 0.15);
}

.dark .severity-low .cvss-circle {
  box-shadow: 0 0 0 4px rgba(103, 194, 58, 0.15);
}

.dark .severity-info .cvss-circle {
  box-shadow: 0 0 0 4px rgba(144, 147, 153, 0.15);
}

.dark .metric-bar {
  background-color: #303030;
}

.dark .impact-item,
.dark .defense-item {
  color: #909399;
}

.dark .evidence-content,
.dark .code-example {
  background-color: #1a1a1a;
  border-color: #303030;
}

.dark .highlight-xss {
  background-color: rgba(214, 137, 16, 0.2);
  color: #e6a23c;
}

.dark .highlight-sql {
  background-color: rgba(2, 136, 209, 0.2);
  color: #409eff;
}

.dark .difficulty-star {
  color: #303030;
}

.dark .difficulty-star.active {
  color: #fadb14;
}

.dark .difficulty-label {
  color: #909399;
}

.dark .code-content.vulnerable {
  color: #f56c6c;
}

.dark .code-content.secure {
    color: #67c23a;
  }

  .dark .suggestion-content {
    background-color: #0e1f28;
    border-color: #173a48;
  }

  .dark .analysis-content {
  background-color: #1a1a1a;
  border-color: #303030;
}

.dark .link-item {
  background-color: #1a1a1a;
}

.dark .link-item:hover {
  background-color: #173a48;
}
  /* 日期信息样式 */
  .date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .date-info .relative-time {
    font-size: 12px;
    color: #909399;
    font-style: italic;
  }
  
  /* 深色模式日期样式 */
  .dark .date-info .relative-time {
    color: #606266;
  }
</style>